<template>
	<view class="">
		<view v-if="postdata.length" v-for="(item,index) in postdata" class="">
			<view class="common-post">
				<view class="common-user">
					<u--image @click="touserinfo(item)" radius="5" :showLoading="true" :src="item.user_pic" width="45px"
						height="45px"></u--image>
					<view class="users">
						<view class="common-username">
							{{item.nickname}}
							<zb-tooltip :content="'认证信息：'+item.rz_describe" :placement="index==0?'bottom':'top'"
								ref="tooltip" color="#3668fc">
								<image @click="showrzmessage(item)" v-if="item.rz_type==1" src="../../static/rz.png"
									style="width: 30rpx;margin-top: 5rpx;height: 30rpx;margin-left: 5rpx;" mode="">
								</image>
							</zb-tooltip>
						</view>
						<view class="common-time">
							<uni-dateformat style="font-size: 25rpx;color: #a1a1a1;"
								:date="item.author_release_time*1000" format="yyyy-MM-dd"
								:threshold="[60000, 3600000 * 24]">
							</uni-dateformat>
						</view>
					</view>
				</view>
				<view @click="topostmore(item.id)" class="common-post-title">
					<u-read-more :toggle="true" showHeight="100" textIndent="0">
						<rich-text :nodes="item.article_title"></rich-text>
					</u-read-more>
				</view>
				<view v-if="item.author_pic !=='null'" class="">
					<swiper indicator-active-color="#eaeaea" indicator-color="rgba(0,0,0,.3)" :indicator-dots="true"
						:autoplay="false" :duration="500" style="height: 500rpx;background-color: #f1f3f4;">
						<swiper-item v-for="(items, indexs) in tojson(item.author_pic)">
							<view class="swiper-item">
								<u--image radius='2.5' :showLoading="true" :src="items" width="100%" height="250px"
									@click="previewimg(item.author_pic,indexs)"></u--image>
							</view>
						</swiper-item>
					</swiper>
					<u-gap bgColor="transparent" height="15"></u-gap>
				</view>
				<view v-if="item.label_names" class="common-post-labe">
					<text class="topic">{{item.label_names}}</text>
				</view>
				<view class="common-post-todos">
					<view class="common-post-todo">
						<u-icon @click="dosport(item,index)" class="icon1"
							:name="item.user_like_count==1?'thumb-up-fill':'thumb-up'"
							:color="item.user_like_count==1?'#3668fc':'#0f0f0f'" size="28"></u-icon>
						<text style="margin-right: 50rpx;"
							:style="item.user_like_count==1?'color:#3668fc':'color:#0f0f0f'">{{item.like_count}}</text>
						<u-icon v-if="posttype" @click="opencommon(item)" class="icon1" name="chat" color="#0f0f0f"
							size="28"></u-icon>
						<!-- <text v-if="posttype">{{item.comment_num}}</text> -->
					</view>
					<view class="common-post-eye">
						<view class="">
							<u-icon class="icon1" name="eye" color="#595959" size="17"></u-icon>
						</view>
						<view style="font-size: 28rpx;color: #595959;">{{graceNumber(item.browse_num)}}</view>
					</view>
				</view>
			</view>
			<u-gap height="5" bgColor="#f0f3f5"></u-gap>
		</view>
	</view>
</template>

<script>
	export default {
		name: "xz-article",
		props: {
			//判断是否处于详情页
			posttype: {
				type: Boolean,
				default: true,
			},
			//postdata 文章数据
			postdata: {
				type: Array,
				default: () => []
			},
			//当前登录用户id
			user_id: {
				type: Number,
				default: null,
			}
		},
		created() {
			this.getuser()
		},
		methods: {
			getuser() {
				uni.getStorage({
					key: 'userinfo',
					success: (res) => {
						this.user_id = res.data.id
					}
				})
			},
			//换算单位
			graceNumber(number) {
				if (number == 0) {
					return "0";
				} else if (number > 999 && number <= 9999) {
					return (number / 1000).toFixed(1) + 'k';
				} else if (number > 9999 && number <= 99999999) {
					return (number / 10000).toFixed(1) + 'w';
				} else if (number > 99999999 && number <= 9999999999) {
					return (number / 100000000).toFixed(2) + '亿';
				}
				return number;

			},
			//前往文章详情
			topostmore(id) {
				if (this.posttype) {
					uni.navigateTo({
						url: '/pages/postmore/postmore?id=' + id
					})
					this.addbrowse(id)
				} else {
					uni.showToast({
						title: "请不要无限套娃",
						icon: 'none'
					})
				}
			},
			//浏览加1
			addbrowse(id) {
				this.$http({
					url: '/api/postbrowse',
					data: {
						articles_id: id
					},
					method: 'POST'
				}).then(res => {

				})
			},
			//打开评论区
			opencommon(i) {
				//此为首页弹窗评论区方法
				// this.$emit('opencommon',i)
				//此为进入文章详情的跳转
				uni.navigateTo({
					url: '/pages/postmore/postmore?id=' + i.id,
					success: (res) => {
						this.addbrowse(i.id)
					}
				})
			},
			//解析文章图片json
			tojson(e) {
				return JSON.parse(e)
			},
			showrzmessage(e) {

			},
			//点赞和取消点赞
			dosport(item, index) {
				if (!this.user_id) {
					uni.showModal({
						content: "请先登录",
						cancelText: "先逛逛",
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							} else {

							}
						}
					})
					return
				}
				let feed = this.postdata[index]
				if (!feed.user_like_count) {
					this.$http({
						url: '/articlelike/articlelike',
						method: 'POST',
						data: {
							articles_id: item.id,
							user_id: item.user_id,
							like_user_id: this.user_id
						},
					}).then(res => {
						if (res.status == 0) {
							feed.like_count++
							uni.showToast({
								title: res.message
							})
							feed.user_like_count = !feed.user_like_count
						} else {
							uni.showToast({
								title: res.message
							})
							return
						}
					})
				} else {
					if (!this.user_id) {
						uni.showModal({
							content: "请先登录",
							cancelText: "先逛逛",
							success: (res) => {
								if (res.confirm) {
									uni.reLaunch({
										url: '/pages/login/login'
									})
								} else {

								}
							}
						})
						return
					}
					this.$http({
						url: '/articlelike/noarticlelike',
						method: 'POST',
						data: {
							articles_id: item.id,
							like_user_id: this.user_id
						},
					}).then(res => {
						if (res.status == 0) {
							feed.like_count--
							uni.showToast({
								title: res.message
							})
							feed.user_like_count = !feed.user_like_count
						} else {
							uni.showToast({
								title: res.message
							})
							return
						}
					})
				}
			},
			//预览图片
			previewimg(e, i) {
				let urldata = JSON.parse(e)
				uni.previewImage({
					current: i,
					urls: urldata
				})
			},
			//进入用户个人主页
			touserinfo(e) {
				console.log(e);
				uni.navigateTo({
					url: '/pages/userinfo/userinfo?user_id=' + e.user_id
				})
			},
		}
	}
</script>

<style>
	.common-post {
		padding: 20rpx;
	}

	.common-user {
		display: flex;
	}

	.common-time {
		font-size: 24rpx;
		color: #a5a5a5;
	}

	.common-user .users {
		margin-left: 20rpx;
	}

	.common-username {
		display: flex;
		align-items: center;
	}

	.common-post-title {
		padding: 20rpx;
	}

	.common-post-todos {
		padding: 20rpx 20rpx 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.common-post-labe {
		font-size: 24rpx;
	}

	.common-post-todo {
		display: flex;
		align-items: center;
	}

	.common-post-eye {
		display: flex;
		align-items: center;
	}

	.topic {
		color: #595959;
		background-color: #f5f5f5;
		margin: 0 10rpx 0 0;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}
</style>